/* generic */
body {
    margin: 0;
    padding: 0;
    font: 15px "Verdana", sans-serif;
    background-color: #434343;
    -webkit-text-size-adjust: none;
}
table {
    font: 15px "Verdana", sans-serif;
}
h2 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 18px;
    color: #545454;
}
p {
    font: 15px "Verdana", sans-serif;
    text-align:justify;
    text-justify:inter-word;
    margin-top: 0.5em;
    margin-bottom: 0.5em;    
}

fieldset {
    padding-bottom: .5em;
    border: 1px solid #383838;
    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
body{
    line-height: 1.4em;
    clear: left;
}

ul {
    list-style-type: none;
    line-height: 1.4em;
    clear: left;
    text-indent: -1.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0.8em;
    padding-left: 0;
}

ul li:before {
    content: "\25B6 \0020";
    color: #878787;
}

ul ul li:before {
    content: "\25A0 \0020";
    color: #CCCCCC;
}
ul ul {
    list-style-type: none;
    margin-left: 0em;
    padding-left: 0.7em;
    text-indent: 0em;
}

form label {
    float: left;
    clear: left;
}
a, a:visited {
    color: #434343;
}

div#copyright {
    font-size: 12px;
    color: #878787;
    text-align: center;
    margin-bottom: 1em;
}
    div#copyright a, div#copyright a:visited {
        color: #878787;
    }
    div#copyright a#feedback, div#copyright a#feedback:visited {
        color: #878787;
    }

span.colour {
    border: 1px solid #383838;
    padding: 0 3px 1px 3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
    span.colour a {
        color: inherit;
        text-decoration: none;
    }

/* top bar */
div#top {
    width: 100%;
    height: 1.6em;
    margin: 0;
    padding: 5px 0;
    color: white;
    background-color: black;

    background-image: linear-gradient(bottom, rgb(0,0,0) 13%, rgb(55,55,55) 77%);
    background-image: -o-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(55,55,55) 77%);
    background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(55,55,55) 77%);
    background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(55,55,55) 77%);
    background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(55,55,55) 77%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, rgb(0,0,0)), color-stop(0.77, rgb(55,55,55)));
    
}
    div#top a {
        color: #DDDDDD;
    }
    div#top a:hover {
        color: white;
    }
    div#top .left {
        float: left;
        margin-left: 1em;
    }
    div#top .right {
        float: right;
        margin-right: 1em;
    }

/* login form */
form#login {
    margin: 0 auto;
    font-size: 12pt;
    font-weight: bold;
}
    form#login label {
        margin: 0.5em 0.5em;
        width: 100%;
    }
    form#login input[type="text"], form#login input[type="password"] {
        width: 93%;
        font-size: 12pt;
        font-weight: bold;
        margin: 0.5em 0;
    }
    form#login input[type="submit"] {
        margin: 0 auto;
        display: block;
        font-size: 12pt;
        font-weight: bold;
        clear: left;
    }
    form#login ul {
        font-size: 12pt;
        font-weight: normal;
        list-style-type: none;
        padding-left: 10px;
    }
        form#login ul li {
            float: left;
            margin-right: 2em;
        }

/* feed */
ul#feed, ul#feed ul {
    text-indent: -0.5em;
    margin-left: 0;
    list-style-type: none;
    padding: 0 10px;
}
ul#feed li:before{
content:"";
}
    ul#feed > li {
        border-left: 1px solid #383838;
        border-right: 1px solid #383838;
        padding: 3px;
        margin-bottom: -1px;
    }
    ul#feed li.user {
        border-top: 1px solid #383838;
        border-bottom: 1px solid #383838;
        margin-bottom: 3px;
        margin-top: 0.5em;
        font-weight: bold;
        background-color: #878787;
        -moz-border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;

        background-image:         linear-gradient(bottom, rgb(135,135,135) 13%, rgb(181,181,181) 67%);
        background-image:      -o-linear-gradient(bottom, rgb(135,135,135) 13%, rgb(181,181,181) 67%);
        background-image:    -moz-linear-gradient(bottom, rgb(135,135,135) 13%, rgb(181,181,181) 67%);
        background-image: -webkit-linear-gradient(bottom, rgb(135,135,135) 13%, rgb(181,181,181) 67%);
        background-image:     -ms-linear-gradient(bottom, rgb(135,135,135) 13%, rgb(181,181,181) 67%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, rgb(135,135,135)), color-stop(0.67, rgb(181,181,181)));
    }
        ul#feed li.user a {
            color: black;
        }
        ul#feed li.user:before {
            content: "\A0\A0\20";
            color: black;
            padding-left: 0.5em;
        }
            ul#feed li.user.own:before {
                content: "\BB\20";
            }
        ul#feed li.user span.date {
            float: right;
            font-size: 12px;
            font-weight: normal;
            margin-right: 3px;
        }
            ul#feed li.user span.delete {
                float: right;
                margin-right: 0.5em;
                color: red;
            }
                ul#feed li.user span.delete a {
                    color: inherit;
                    text-decoration: none;
                }
    ul#feed li.location {        
        margin-top: -3px;
        font-weight: bold;
        background-color: white;
        -moz-border-radius: 0 0 5px 5px;
        -webkit-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
    }
    ul#feed li.location > a {
        margin-left: 1em;
    }
    ul#feed li.location ul {
        font-weight: normal;
        padding: 3px 7px 0 7px;
        margin-bottom: 0.3em;
        margin-top: 0.3em;
    }
    ul#feed li.date {
        font-size: 12px;
        margin-top: -2.2em;
        direction: utd;
        text-align: right;
        float: right;
    }
        ul#feed.viewuser li.date {
            margin-top: 0;
        }
    ul#feed li.route {
        margin-top: 0;
        margin-left: 0.5em;
    }
    ul#feed li.comment, div.comment {
        font-style: italic;
        font-size: 12px;
        padding: 2px 5px;
        margin-top: 0.5em;
        border: 1px solid #CCCCCC;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-indent: 0;
    }
        ul#feed li.comment.red, div.comment.red {
            border: 2px solid red;
            background-color: #FFCC99;
        }
        ul#feed li.comment.green, div.comment.green {
            border: 2px solid green;
            background-color: #99FF66;
        }
        span.completed, span.notcompleted, span.blockcompleted {
            font-weight: bold;
        }
        span.completed {
            color: green;
        }
            span.completed:before {
                content: "\2714";
            }
        span.notcompleted {
            color: red;
        }
            span.notcompleted:before {
                content: "\2718";
            }
        span.blockcompleted {
            color: orange;
        }
            span.blockcompleted:before {
                content: "\007E";
            }

    ul#checkin {
        line-height: 2em;
        padding-left: 0.8em;
    }
    ul.spaced {
        padding-left: 0.8em;
    }
        ul.spaced li {
            margin-bottom: 0.6em;
        }
    
    ul#picklocation, ul#pickroute {
        line-height: 2em;
        padding-left: 0px;
        margin: auto;
        overflow: hidden;
        height: auto;
    }
    
    ul#picklocation li,
    ul#pickroute li {
        border: 1px solid #CCCCCC;
        margin-bottom: 0.4em;
        margin-right: 0.4em;
        cursor: pointer;
        width: 230px;
        float: left;
        
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    
    ul#picklocation li {
        text-indent: 0.3em;
        padding: 0.4em;
    }
    
    ul#pickroute li {
        text-align: center;
        line-height: 1.4em;
        padding-top: 0.4em;
        padding-bottom: 0.3em;
        height: 42px;
    }
    
    ul#picklocation li.extra,
    ul#pickroute li.extra {
        clear: left;
        background-color: #ccc;
        margin-top: 1.4em;
        height: auto;
    }
        
        ul#picklocation li.extra a,
        ul#pickroute li.extra a {
            color: #383838;
        }

    ul#pickroute li#editlocation {
        margin-top: 0;
    }
    
    ul#picklocation li:before, ul#pickroute li:before {
        content: "";
    }
    
    ul#pickroute span.route_date {
        font-size: 11px;
        text-align: right;
    }
    ul#pickroute span.route_name {
        font-style: italic;
        font-size: 11px;
        width: 10px;
        overflow: hidden;
    }

img.routetype {
    background: url('/img/route_types.png') no-repeat transparent;
    background-position: 0 17px;
    width: 10px;
    height: 17px;
    overflow: hidden;
    vertical-align: middle;
}
    img.routetype.o   { background-position: 0 0; }
    img.routetype.s   { background-position: 0 -17px; }
    img.routetype.sio { background-position: 0 -34px; }
    img.routetype.ois { background-position: 0 -51px; }
    img.routetype.vio { background-position: 0 -68px; }
    img.routetype.vis { background-position: 0 -85px; }
    img.routetype.siv { background-position: 0 -102px; }
    img.routetype.oiv { background-position: 0 -119px; }
    img.routetype.v   { background-position: 0 -136px; }

form input[type="text"] {
    width: 164px;
    padding-top: 3px;
    padding-bottom: 3px;
}
form select {
    width: 170px;
    padding-top: 3px;
    padding-bottom: 3px;
}
form input[type="submit"] {
    margin-top: 5px;
    width: 170px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
}
form textarea {
    width: 250px;
    height: 100px;
    font: 15px "Verdana", sans-serif;
}
form label {
    margin-bottom: 0.5em;
}

.error, .success {
    border-width: 2px;
    border-style: solid;
    padding: 2px 5px;
    margin-bottom: .5em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.error {
    border-color: red;
    background-color: #FFCC99;
}

.success {
    border-color: green;
    background-color: #CCFFCC;
}

div#body form > div {
   margin: 0.7em;
}
div#body > fieldset, div#body > form > fieldset {
    margin: 1em 0.7em;
    background-color: white;
}
fieldset ul {
    margin-top: 5px;
    padding-left: 5px;
}


/* user page */

ul.userpage li:before{
content: "\25B6 \0020";
color: #878787;
}

ul.userpage {
    list-style-type:none;
    margin-left: 0em;
    padding-left: 0.5em;
    text-indent: -0.5em;
}

ul.userpage ul li:before{
content: "\25A0 \0020";
color: #CCCCCC;
}
ul.userpage ul{
    list-style-type:none;
    margin-left: 0em;
    padding-left: 0.7em;
    text-indent: 0em;
}

/* bar graphs */
span.bar {
    background-color: #878787;
    color: white;
    font-weight: bold;
    float: left;
    padding: 2px 5px;
}

/* route stats */
div.comment {
    margin-left: 1em;
    padding-left: 1em;
}

span.required {
   color: red;
   vertical-align: top;
}
   form#login span.required {
      font-weight: normal;
      vertical-align: middle;
   }

input#deleteaccount {
   background-color: #FF4000;
}

form#news textarea, form#news input[type=text] {
   margin-bottom: 0.5em;
   margin-right: 1em;
}

form#checkin input[name="blocks"] {
    text-align: center;
    font-weight: bold;
    width: 30px;
}

img#avatar {
    border-left: 1px solid rgb(195,195,195);
    border-top: 1px solid rgb(195,195,195);
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/***********************************
 *** BEWARE, MEDIA QUERIES BELOW ***
 ***********************************/

/* top mobile landscape mode */
@media all and (min-width: 481px) and (max-width: 759px) {
    ul#pickroute,
    ul#picklocation {
        width: 476px;
    }
    
    ul#pickroute li.extra,
    ul#picklocation li.extra {
        width: 468px;
    }
}

/* iPhone 4(S) landscape mode */
@media all and (max-width: 480px) and (min-width: 361px) {
    ul#pickroute li,
    ul#picklocation li {
        width: 202px;
    }
    
    ul#pickroute li.extra,
    ul#picklocation li.extra {
        width: 412px;
    }
}

/* mobile portrait mode */
@media all and (max-width: 360px) {
    ul#pickroute li,
    ul#picklocation li {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
